<clr-modal [(clrModalOpen)]="opened" [clrModalClosable]="false">
    <h3 class="modal-title">{{"APP_ADD_STORAGE_PROVISIONER" |translate}}</h3>
    <div class="modal-body">
        <form clrForm #selectForm='ngForm'>
            <clr-select-container>
                <label>{{"APP_TYPE"|translate}}</label>
                <select clrSelect [(ngModel)]="item.type" name="type" required>
                    <option value="">{{"APP_DEFAULT_OPTION"|translate}}</option>
                    <option value="nfs">nfs</option>
                    <option value="external-ceph" *ngIf="currentCluster.spec.architectures === 'amd64'">external-ceph</option>
                    <option value="rook-ceph" *ngIf="currentCluster.spec.architectures === 'amd64'">rook-ceph</option>
                    <option value="cinder" *ngIf="currentCluster.spec.architectures === 'amd64'">cinder</option>
                    <option value="vsphere" *ngIf="currentCluster.spec.architectures === 'amd64'">vsphere</option>
                    <option value="glusterfs">glusterfs</option>
                    <option value="oceanstor" *ngIf="currentCluster.spec.architectures === 'amd64'">oceanstor</option>
                </select>
            </clr-select-container>
            <br>
            <span *ngIf="item.type==='vsphere'" class="my-translated-paragraph">{{'APP_PROVISIONER_VSPHERE_WARNING'|translate}}</span>
        </form>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-outline" (click)="onCancel()">{{'APP_CANCEL'|translate}}</button>
        <button type="button" class="btn btn-primary" (click)="onSubmit()"
                [disabled]="selectForm.invalid">{{'APP_NEXT'|translate}}</button>
    </div>
</clr-modal>
